<template>
<div>
        <div class="artificialMark">
              <div class="thumbnail" v-show="showOrHiddenThumbnail">
                  <el-tabs v-model="activeName" class="demo-tabs" stretch='true' @tab-click="handleClick">
             <el-tab-pane label="未标注" name="first"  style="padding:0 20px">
             <div class="contents" v-for="(item,index) in noMarkImg" :key="index">
                 <img :src="item.path" alt="" @click="goIdImg(index)">
                <el-checkbox v-model="item.checkbox" size="large"/>
             </div>
             <el-pagination layout="prev, pager, next" :total="noTotal" :page-size='pageSize'  :current-page='pageNums' @current-change='currentChange' style="display: flex;justify-content: center;"/>
         </el-tab-pane>
          <el-tab-pane label="已标注" name="second"  style="padding:0 20px">
             <div class="contents" v-for="(item,index) in MarkImg" :key="index">
                 <img :src="item.path" alt="" @click="goIdImg(index)">
                <el-checkbox v-model="item.checkbox" size="large"/>
             </div>
             <el-pagination layout="prev, pager, next" :total="totals" :page-size='pageSize'  :current-page='pageNums' @current-change='currentChange' style="display: flex;justify-content: center;"/>
         </el-tab-pane>
  </el-tabs>
            </div>
         <div class="content" :style="{width:showOrHiddenThumbnail?'55%':'70%',margin:'-80px 0 0 0'}">
              <img  @click="clickicon('up',2)" class="icon iconLeft" src="@/assets/washImg/左翻.png" alt="">
             <img  @click="clickicon('down',2)" class="icon iconRight" src="@/assets/washImg/右翻.png" alt="">
            <div class="img" id='imgBox'>    
            <img :src="`${imageApis}/${images.photoListId}/raw/${images.name}`" :id="'scaleImg'" ref="scaleImg" alt="" v-if="images!={}"> 
                <div class="lableId" :ref="`lableId${item.labelId}`" v-show="allShowOrHiddId" v-for="(item,index) in markList" :key="index" :style="{left:item.x+5 +'px',top:item.y+5 +'px',color:`${item.color}`,display:item.showLabel?'block':'none'}">
                {{item.labelId}}
            </div> 
            <canvas ref="markCanvas"  tabindex='0'></canvas>
          
        </div>
        <Progress :value="value"  :finish='finish' :imgTotal='count' @click="showOrHiddenThumbnail=!showOrHiddenThumbnail"/>
      </div>
        <div class="markDrawer" >
            <div class="tagCategory">
                <span>标签类别</span>
                <el-select v-model="tagGroup" class="m-2" placeholder="添加标签组" @change="saveTagId" size="small"  collapse-tags>
          <el-option
         v-for="item in tagGroupList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        />
           </el-select>
            </div>
            <div class="tag">
                   <div class="search">
                <el-input v-model="tagName"  @input="searchTag" style="width:260px;height:30px">
                    <template #prefix>
                          <el-icon class="el-input__icon"><Search /></el-icon>
                    </template>
                </el-input>
                   </div>
             <div class="tags">
                    <div class="tagContent" v-for="(item,index) in tagList" :key="index" @click="markLabel(item)">
                        <span>{{item.name}}</span>
                        <el-button class="w-40 h-20 tagText" :style="{background:item.colour}">{{item.id}}</el-button>
                </div>
             </div>
            </div>
              <div class="pagination">
                  <el-pagination layout="prev, pager, next" :total="total" @current-change='currentChange' :current-page="pageNum" :page-sizes='size' small/>
              </div>
            
              <div class="markList">
                  <div class="header">
                      <span class="title">标注列表</span>
                  </div>
                  <div class="mark">
                      <div v-for="(item,index) in markLable" :key="index">
                          <div class="mark-content">
                          <div class="mark-icon">
                              <el-icon style="width:16px;height:16px" v-show="item.showLabel" @click="showLabelAll(item)"><View /></el-icon>
                              <el-icon @click="showLabelAll(item)" v-show="!item.showLabel"><Hide /></el-icon>
                          </div>
                          <div class="mark-message">
                              <span>{{index +1}}</span>
                              <el-icon v-show="item.topOrBottom" @click="activeMarkItem(index)"><CaretTop /></el-icon>
                              <el-icon v-show="!item.topOrBottom" @click="activeMarkItem(index)"><CaretBottom /></el-icon>
                              <span>{{item.name}}</span>
                              <span>ID: {{item.id}}</span>
                              <span>数量: {{item.children.length}}</span>
                              <el-icon @click="labelreplaceAll(item)"><Refresh /></el-icon>
                              <el-icon @click="showDel(item,2)"><Delete /></el-icon>
                          </div>
                      </div>
                      <div class="mark-item-content" v-for="(items,indexs) in item.children" :key="indexs" v-show="item.topOrBottom">
                            <div class="mark-icon">
                              <el-icon style="width:16px;height:16px" v-show="items.showLabel" @click="showLabels(items)"><View /></el-icon>
                              <el-icon @click="showLabels(items)" v-show="!items.showLabel"><Hide /></el-icon>
                          </div>
                              <div class="mark-item-message">
                            <div style="width:100%;  text-align: center;">
                                  <span>{{indexs+1}}</span>
                              <span style="margin:0 30px">{{items.labelName}}</span>
                              <span>ID: {{items.labelId}}</span>
                            </div>
                              <div class="icon" @click.stop>
                                  <el-icon class="cursor" @click="labelreplace(items)"><Refresh /></el-icon>
                              <el-icon @click.stop="showDel(items,3)"><Delete /></el-icon>
                              </div>
                          </div>
                      </div>
                      </div>
                  </div>
              </div>
                 <div class="message">
                      <div class="header">消息窗口 </div>
                      <div class="allMessage">
                          <div class="text">
                               <el-icon v-show="CaretTop" @click="CaretTop=!CaretTop"><CaretTop /></el-icon>
                              <el-icon class="cursor" v-show="!CaretTop" @click="CaretTop=!CaretTop"><CaretBottom /></el-icon>
                              <span>显示所有输出消息</span>
                          </div>
                         <div style="  margin-top:10px;height: 200px;overflow-y: auto;" v-show="!CaretTop" >
                              <div class="editMessage" v-for="(item,index) in massageList" :key="index">
                              <div class="box_12"></div>
                              <span>{{item}}</span>
                          </div>
                         </div>
                      </div>
                 </div>
        </div>
    </div>
      <el-dialog
    v-model="dialogVisibleDel"
    title="提示"
    width="30%"
    :before-close="delClose"
  >
    <span style="font-weight: 600;">确认是否要删除</span>
    <template #footer>
      <span>
        <el-button @click="delClose">取消</el-button>
        <el-button type="primary" @click="submitDel">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
       <el-dialog
    v-model="dialogVisibleSeave"
    title="提示"
    width="30%"
    :before-close="seaveClose"
  >
    <span style="font-weight: 600;">还没有保存,是否保存</span>
    <template #footer>
      <span>
        <el-button @click="seaveClose">取消</el-button>
        <el-button type="primary" @click="saveBatch">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
     <el-dialog
    v-model="dialogVisibleStatistics"
    title="提示"
    width="25%"
  >
    <div style="margin:auto; text-align: center;">
        <span style="display: block;margin-bottom:20px">当前界面标注框个数：{{markList.length}}个</span>
     <span >所有界面标注框个数：{{allNum + markList.length}}个</span>
    </div>
    <template #footer>
      <span>
        <el-button @click="dialogVisibleStatistics = false">取消</el-button>
        <el-button type="primary" @click="dialogVisibleStatistics = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
       <el-dialog
    v-model="dialogVisibleReplace"
    title="提示"
    width="25%"
    :before-close="replaceClose"
  >
    <span style="font-weight: 600">确认是否要更改标签</span>
    <div style="margin:20px auto 0; text-align: center;">
        <span style="display: block;margin-bottom:20px"><span style="margin-right:20px">原标签： {{replaceData.name}} </span>    ID：{{replaceData.labelId}}</span>
    </div>
    <template #footer>
      <span>
        <el-button @click="replaceClose">取消</el-button>
        <el-button type="primary" @click="submitReplace">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
    <el-dialog
    v-model="labelReplace"
    title="提示"
    width="25%"
    :before-close="labelReplaceClose"
  >
    <span style="font-weight: 600">确认是否要更改标签</span>
    <div style="margin:20px auto 0; text-align: center;">
        <span style="display: block;margin-bottom:20px"><span style="margin-right:20px">原标签： {{replacelabelData[0].name}} </span>    ID：{{replacelabelData[0].labelId}}</span>
    </div>
    <template #footer>
      <span>
        <el-button @click="labelReplaceClose">取消</el-button>
        <el-button type="primary" @click="submitLabelReplace">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
</template>
<script lang="ts">
import {dataWash} from "@/apis/dataWash/index"
import {TagGroup,type TagGroupInfo,Tag,type TagInfo} from "@/apis/tag"
import frameProperty from '@/mixins/frame-property'
import Progress from "./progress.vue"
import { imageApis,RequestCode } from '@/server/base'
import {artificialMark} from "@/apis/artificialMark"
import {draw,deleteDraw,reDraw} from "./draw"; // 矩形绘制方法
import { th } from 'element-plus/es/locale'


export default {
    name:'ArtificialMark',
     mixins: [frameProperty],
     components:{Progress},
     data(){
         return {
             imageApis:imageApis,
             url:'http://172.16.23.238:80/',//图片路径前置地址
            tagName: '' as string,
            cav:null as any,
            ctx:null as any,
            operateArr:[] as any[], //记录操作行为的数组
            copyMsrk:null as any ,//复制选中的标注框的坐标
            scale:1 as any, //缩放倍数
            allShowOrHiddId:true as boolean,
            currentIndex:1 as number, //当前所在图片下标
            timer:null as any, //自动轮播
            saveScale:true as boolean, //是否保存缩放操作
            tagGroup:[],
            tagGroupList:[] as TagGroupInfo[],//所有标签组ID
            tagGroupArr:[] as any[],//和图片对应的数据集关联的标签组ID
            tagList:[] as TagInfo[],
            markColor:'' as string,
            labelId:'' as string | number,
            labelName:""as string,
            markLable:[] as any,
            isLableList:[]as number[],
            total:0 as number,
            size:10 as number,
            pageNum:1 as number,
            massageList:[] as string[], //消息窗口
            dialogVisibleDel:false as boolean,
            dialogVisibleStatistics:false as boolean,
            imgHeight:null as any,
            imgWidth:null as any,
            showOrHiddenThumbnail:false as boolean,
            activeName:'first' as string,
            deleteClass:1,
            deleteVal:null as any,
            replaceData:{},
            dialogVisibleReplace:false,
            dialogVisibleSeave:false,
            allNum:0 as number,//所有页面标注框的个数
            count:0 as number,//图片总数
            images:{} as any,//图片信息
            finish:0,//已标注图片数量
            isSave:true,//是否已保存
            isAuto:1,//是否自动浏览还是手动
            upOrDown:'',//左翻还是右翻
            shift:{},//移动前坐标
            simpImg:[] as any,//缩略图
            simpTotal:0,
            simpSize:2,
            simpNum:5,
        noMarkImg:[]as any,//未标注
            MarkImg:[] as any,
            pageSize:5,
            pageNums:1,
            noTotal:0,
            totals:0,
            CaretTop:true,
            labelReplace:false,
            replacelabelData:[] as any,
            scaleNumImg:0 as number,
            scaleProportion:1 as number
         }
     },
     computed:{
           userName(): string {
      return (this.userInfo as any).username || (this.userInfo as any).jobNumber
    },
    userId() {
      return (this as any).$store.getters.userId
    },
         copyList(){
             return (this as any).$store.state.operate.copyList 
         },
         value(){
             return (this.finish/this.count)*100
         },
         //选中的标注框的坐标
         activeMark(){
             return (this as any).$store.state.operate.activeMark
         },
         operate(){
             return (this as any).$store.state.operate.operateAction
         },
         //标记内容数组
         markList(){
              return (this as any).$store.state.operate.markList
         },
         //选中的标注框下标
         markIndex(){
             return (this as any).$store.state.operate.markIndex
         },
         //自动轮播速率
         percentage(){
               return (this as any).$store.state.operate.percentage
         },
         //创建或移动标注框的操作
         createOrMove(){
               return (this as any).$store.state.operate.createOrMove
         }
     },
     watch:{
         operate(val){  
             let that : any =this   
             if(val=='删除'){
                 if(that.markIndex!==null && that.markIndex>=0){
                           that.dialogVisibleDel=true
                           that.deleteClass=1
                 } else{
                          (this as any).$store.commit('operate/editOperate','qww');
                 }
             }else if(val=='复制'){
                 this.copyDraw()
             }else if(val=='粘贴'){
                this.paste()
             }else if(val=='放大'||val=='缩小'){
                 this.scaleImg(val)
             }else if(val =='显示' || val=='隐藏'){
                 this.allShowOrHiddLableId(val)
             }else if(val=='自动浏览'){
                if(this.isSave){
                     this.startInterval()
                }else{
                    this.isAuto=1
                    this.dialogVisibleSeave=true
                }
             }else if(val == '撤销'){
                 this.cancel()
             }else if(val =='统计'){
                 this.countAnnotation()
             }else if(val=='保存'){
                 this.saveBatch()
             }else if(val =='清空'){
                 this.clearMark()
             }else if(val=='替换'){
                 this.replaceLable()
             }
              if(val!=='qww' && val!=='' && val!=='自动浏览' && val!=='删除' && val!=='创建' && val!=='平移' && val!=='编辑'){
                  this.massageList.unshift(val)
              }
    
         },
         markList(val){
             this.getMarkLable();
         },
         
     percentage(val){
     clearInterval(this.timer);
    this.timer=null
    this.startInterval()
    },
    createOrMove(val){
        if(val=='创建'){
            let frame={}
            let markIndex =null
            this.markList?.forEach((item:any,index:number)=>{
                if(index==this.markList.length -1){
                    frame=item
                    markIndex=index
                }
            })
            let data={
                operate:val,
                frame:frame,
                index:markIndex
            }
            this.saveOperate(data)
             this.massageList.unshift(val);
                  (this as any).$store.commit('operate/updateCreateOrMove','qww')
        }else if(val=='移动'){
            let that :any =this
              if(this.markIndex !==null && this.markIndex>=0){
                this.shift={
                operate:val,
                frame:that.activeMark,
                index:that.markIndex
            } 
      }
        }else if(val=='取消移动'){
            if(this.markIndex !==null && this.markIndex>=0){
            
            this.saveOperate(this.shift) 
                this.massageList.unshift('移动');
            }         
        (this as any).$store.commit('operate/updateCreateOrMove','qww')
      }else if(val=='开始编辑'){
      
      }else if(val=='编辑'){
            if(this.markIndex !==null && this.markIndex>=0){
                this.markList.forEach((item:any,index:number)=>{
                    if(index==this.markIndex){
                        this.shift={
                          operate:'编辑',
                          frame:item,
                          index:this.markIndex
                        }
                    }
                })
            this.saveOperate(this.shift) 
                this.massageList.unshift('编辑');
            }  
                 (this as any).$store.commit('operate/updateCreateOrMove','qww')
      }
      

    },
    markColor(val){
      let data ={
            markColor:this.markColor,
           labelId: this.labelId,
           labelName:this.labelName
        };
        (this as any).$store.commit('operate/updateLable',data)
    },
    scale(val){
        (this as any).$store.commit('operate/updateScale',val)
    },
    showOrHiddenThumbnail(val){
        if(val){
            (this as any).getAbbreviateImg();
        }
    }
     },
     created(){
          (this as any).$store.commit('operate/updateRouterName',this.$route.name)
        this.getImg()
         this.getTagGroup()

     },
     mounted(){
            this.$nextTick(()=>{
          this.getImgWidth()
            })
        
     },
     methods:{
         getImgWidth(){
             let that:any=this
                  let scaleImg :any =document.getElementById('scaleImg')
                  scaleImg.onload=()=>{
                         if(that.imgHeight==0){
                     that.imgHeight=scaleImg.height
                 }
     
                 if(that.imgWidth==0){
                     that.imgWidth=scaleImg.width
                 }
                }
            if(this.ctx!=null){
             (this as any).$store.commit('operate/updateMarkList',[]);
             th
           (this as any).ctx.clearRect(0,0,this.cav.width,this.cav.height);
            this.ctx.beginPath()
            draw(this.cav,[]);
             }
              this.initCanvas()

         },
         labelreplaceAll(val:any){
              this.replacelabelData=[]
             this.markList.forEach((item:any,index:number)=>{
                 if(item.labelId==val.id){
                           this.replacelabelData.push(
                                 {
                                labelId:item.labelId,
                                name:item.labelName,
                                color:item.color,
                                index:index
                            }
                            );
                 }
             })
               this.labelReplace=true
         },
         labelreplace(val:any){
             this.replacelabelData=[]
                    if(val.h!==undefined){
           for(let i=0;i<this.markList.length;i++){
        if(this.markList[i].x==val.x && this.markList[i].y==val.y && this.markList[i].h==val.h && this.markList[i].w==val.w ){
                   this.replacelabelData.push(
                                 {
                                labelId:this.markList[i].labelId,
                                name:this.markList[i].labelName,
                                color:this.markList[i].color,
                                index:i
                            }
                            );
                            this.labelReplace=true
        }          
        }
      }else{
           for(let i=0;i<this.markList.length;i++){
          if(this.markList[i].x==val.x && this.markList[i].y==val.y && this.markList[i].h==val.height && this.markList[i].w==val.width ){
                    this.replacelabelData.push(
                             {  
                                labelId:this.markList[i].labelId,
                                name:this.markList[i].labelName,
                                color:this.markList[i].color,
                                index:i
                            }
                            );
                            this.labelReplace=true
        }
      } 
      }
         },
         submitLabelReplace(){
             let that :any =this
           that.replacelabelData.forEach((item:any)=>{
               that.markList.forEach((items:any,indexs:number)=>{
                           if(item.index==indexs){
                         this.saveOperate({operate:'标签替换',data:this.replacelabelData})
                            items.labelId=this.labelId
                            items.color=this.markColor
                            items.labelName=this.labelName
                 
               reDraw(that.cav,that.ctx,that.markList,indexs);
                draw(that.cav,that.markList);
                that.labelReplace=false;
                 that.massageList.unshift('替换')    
                         }
               })
           })
              that.getMarkLable()
         },
         showLabelAll(val:any){
             val.showLabel=!val.showLabel
             this.markList.forEach((item:any,index:number)=>{
                 if(val.id==item.labelId){
                    item.showLabel=val.showLabel
                 }
             })
         },
         showLabels(val:any){
            val.showLabel=!val.showLabel
           if(val.h!==undefined){
           for(let i=0;i<this.markList.length;i++){
        if(this.markList[i].x==val.x && this.markList[i].y==val.y && this.markList[i].h==val.h && this.markList[i].w==val.w ){
             this.markList[i].showLabel=val.showLabel
        }          
        }
      }else{
           for(let i=0;i<this.markList.length;i++){
          if(this.markList[i].x==val.x && this.markList[i].y==val.y && this.markList[i].h==val.height && this.markList[i].w==val.width ){
               this.markList[i].showLabel=val.showLabel
        }
      } 
      }
         },
                 //获取缩略图
        getAbbreviateImg(){
            this.noMarkImg=[]
            this.MarkImg=[]
            let noMark:any=[]
            let mark :any=[]
            artificialMark.getUserSimp(1).then((res:RequestCode)=>{
                     res.data.forEach((item:any)=>{
                   if(item.state==0){
                       noMark.push(item)
                   }else{
                      mark.push(item)
                   }
               })
                this.noTotal=noMark.length
                this.totals=mark.length
               this.noMarkImg=noMark.slice((this.pageNums-1)*this.pageSize,(this.pageNums-1)*this.pageSize+this.pageSize)
                this.MarkImg=mark.slice((this.pageNums-1)*this.pageSize,(this.pageNums-1)*this.pageSize+this.pageSize)
                this.noMarkImg.forEach((item:any)=>{
                    item.checkbox=true
                })
                  this.MarkImg.forEach((item:any)=>{
                    item.checkbox=true
                })
            })
        }, 
         //获取图片
         getImg(){
             this.operateArr=[]
             this.massageList=[];
             this.scale=1
             let params={
                 userId:this.userId,
                 imageIndex:this.currentIndex
             }
             if(this.cav!=null){
                     (this as any).$store.commit('operate/updateMarkList',[]);
                  (this as any).ctx.clearRect(0,0,this.cav.width,this.cav.height);
                this.ctx.beginPath()
                 draw(this.cav,[]);
             }
             artificialMark.getImg(params).then((res:RequestCode)=>{
                this.count=res.data.count
                this.finish=res.data.finish
                this.images=res.data.image[0]
               
                let imgBox :any=document.getElementById('imgBox')
                   let scaleImg :any =document.getElementById('scaleImg')
                if(this.images.imageHeight>this.images.imageWidth){
                        this.scaleProportion=Number((imgBox?.scrollHeight /this.images.imageHeight).toFixed(2));
                           if(this.images.imageHeight>imgBox.scrollHeight){
                      this.imgHeight=this.images.imageHeight *  this.scaleProportion 
                       scaleImg.height=this.images.imageHeight *  this.scaleProportion
                }else{
                      this.imgWidth=this.images.imageWidth 
                     this.imgHeight=this.images.imageHeight
                       scaleImg.width=this.images.imageWidth
                       scaleImg.height=this.images.imageHeight
                     
                }
                }else{
                          this.scaleProportion=Number((imgBox?.scrollWidth /this.images.imageWidth).toFixed(2));
                         if(this.images.imageWidth>imgBox.scrollWidth){
                      this.imgWidth=this.images.imageWidth *  this.scaleProportion
                       scaleImg.width=this.images.imageWidth *  this.scaleProportion
                           this.imgHeight=scaleImg.height
                }else{
                     this.imgWidth=this.images.imageWidth 
                     this.imgHeight=this.images.imageHeight
                       scaleImg.width=this.images.imageWidth
                       scaleImg.height=this.images.imageHeight 
                }
                }
                  this.getLabel();
                (this as any).$store.commit('operate/updatePhotoListId',this.images.photoListId)
             })
         },
         //获取图片集所有标签
         getLabel(){
             artificialMark.getLabelByPhotoList({current:this.pageNum,size:this.size,photoListId:this.images.photoListId}).then((res:RequestCode)=>{
                 this.total=res.data.total
                   this.tagList= res.data.records
                 this.markLabel(this.tagList[0])
                 this.getImgMsg(this.images.id)
             })
         },
         //获取图片标注信息
         getImgMsg(val:number|string){
             artificialMark.getImgMsg(val).then((res:RequestCode)=>{
                 let data :any[]=res.data      
                 data?.forEach((item:any)=>{
                     this.tagList.forEach((items:any)=>{
                         if(item.labelId == items.id){
                             item.labelName=items.name
                             item.color=items.colour;
                             item.showLabel=this.allShowOrHiddId
                         }
                     })
                 });
            
                 data.forEach((item:any)=>{
                     item.x=item.x *this.scaleProportion
                     item.width=item.width*this.scaleProportion
                     item.y=item.y*this.scaleProportion
                     item.height=item.height*this.scaleProportion
                          
                 });
                 (this as any).$store.commit('operate/updateMarkList',data);
                if(this.cav==null){
                      this.canvas()
                }else{
                               if(this.cav!=null){
                     (this as any).$store.commit('operate/updateMarkList',[]);
                  (this as any).ctx.clearRect(0,0,this.cav.width,this.cav.height);
                this.ctx.beginPath()
                 draw(this.cav,[]);
             }

                    this.initCanvas()
                }
             })
         },
         goIdImg(index:number){
             this.currentIndex=index
             if(this.isSave){
                 this.getImg()
             }else{
                 this.dialogVisibleSeave=true
                 this.isAuto=3
             }
         },
         getUserSimp(){
             artificialMark.getUserSimp(0).then((res:RequestCode)=>{
                 let data=res.data
                this.simpImg = data.slice((this.simpNum-1)*this.simpSize,(this.simpNum-1)*this.simpSize+this.simpSize)
                 this.simpTotal=res.data.length
             })
         },
         //统计标注框个数
         countAnnotation(){
             let data = {
                 currentImageId:this.images.id,
                 photoListId:this.images.photoListId,
                 userId:this.userId
             }
             artificialMark.countAnnotation(data).then((res:RequestCode)=>{
                 this.allNum=res.data.allNum
             })
             this.dialogVisibleStatistics=true;
                (this as any).$store.commit('operate/editOperate','qww');
         },

         //获取图片宽高
         getImgWidth(){
              let scaleImg :any =document.getElementById('scaleImg')
                scaleImg.onload=()=>{
             this.imgHeight=scaleImg.height 
             this.imgWidth=scaleImg.width
                }
         },

         //查询标签
         searchTag(){
         if(this.tagName.length!=0){
             artificialMark.getLabelByPhotoList({current:this.pageNum,size:this.size,photoListId:this.images.photoListId}).then((res:RequestCode)=>{
                    this.tagList=  res.data.records.filter((item:any)=>{
                  return item.name.indexOf(this.tagName) !== -1 
      })
             })   
         }else{
             this.getLabel()
         }
         },
         //获取标注列表
         getMarkLable(){
               let afterData :any[]= []
            this.markList?.forEach((item:any)=>{
                if(item.showLabel==undefined){
                    item.showLabel=this.allShowOrHiddId
                }
                let flag = afterData.find(item1=>item1.id === item.labelId)
                if(!flag){
                    afterData.push({
                        name:item.labelName,
                        id:item.labelId,
                        showLabel:item.showLabel,
                        children:[item],
                        topOrBottom:true
                    })
                }else{
                    flag.children.push(item)
                }
            })
                    this.markLable.forEach((item:any)=>{

                afterData.forEach((items:any)=>{
                    if(item.id==items.id){
                        items.topOrBottom=item.topOrBottom
                    }
                })
            })
             this.markLable=[]
            this.markLable=afterData
         },
         showDel(val:any,num:number){
             this.dialogVisibleDel=true
             this.deleteClass=num
             this.deleteVal=val
         },
         //删除所有标签相同的标注框
         deleteMarkLableAll(){
             let arr :any[]=[]
        for(let i=0;i<this.markList.length;i++){
        if(this.markList[i].labelId==this.deleteVal.id){
            arr.push(this.markList[i])
            this.markList.splice(i,1);
            i--;
        }
    }
                 let data={
                operate:'删除标签',
                frameList:arr
            }
                this.saveOperate(data);
                this.massageList.unshift(`删除所有标签ID为${this.deleteVal.labelId}的标注框`)
                 this.initCanvas()
         },
         deleteMarkLable(){
             let frame={}
            let index:number|null =null
      if(this.deleteVal.h!==undefined){
           for(let i=0;i<this.markList.length;i++){
        if(this.markList[i].x==this.deleteVal.x && this.markList[i].y==this.deleteVal.y && this.markList[i].h==this.deleteVal.h && this.markList[i].w==this.deleteVal.w ){
            index=i
            frame=this.markList[i]
            this.markList.splice(i,1);
            i--;
        }
        }
      }else{
           for(let i=0;i<this.markList.length;i++){
          if(this.markList[i].x==this.deleteVal.x && this.markList[i].y==this.deleteVal.y && this.markList[i].h==this.deleteVal.height && this.markList[i].w==this.deleteVal.width ){
            index=i
            frame=this.markList[i]
            this.markList.splice(i,1);
            i--;
        }
      } 
      }
                let data={
                operate:'删除',
                frame:frame,
                index:index
            }
             this.saveOperate(data)
            this.initCanvas()
         },
         //是否显示标注列表中的子标签
         activeMarkItem(index:number){
             this.markLable.forEach((item:any,indexs:number)=>{
                 if(index==indexs){
                     item.topOrBottom=!item.topOrBottom
                 }
             })
         },
         //获取所有标签组
         getTagGroup(){
         TagGroup.list({
        current: 1,
        size: 998,
        keyword: ''}).then((res:RequestCode)=>{  
            this.tagGroupList=res.data.records
        })
         },
         saveTagId(val:number){
                  let params={
                 labelGroupId:val,
                 photoListId:this.images.photoListId
             }
           artificialMark.saveGroupToPhotoList(params).then((res:RequestCode)=>{
                this.getLabel()
           })
         },
         //选择标签
         markLabel(val:any){
             this.labelId=val.id
             this.markColor=val.colour
             this.labelName=val.name
         },
         //存储操作行为
         saveOperate(val:any){
             if(this.operateArr.length<3){
                 this.operateArr.push(val)
             }else{  
                    this.operateArr.splice(0,1)
                 this.operateArr.push(val)      
             }
             if(val.operate!='放大'&&val.operate!='缩小'&&val.operate!='显示'&&val.operate!='隐藏'&&val.operate!=undefined){
                    this.isSave=false
             }
           
         },
         //保存标注信息
         saveBatch(){
                let scaleImg :any =document.getElementById('scaleImg')
                let annotationList :any=[]
                this.markList?.forEach((item:any,index:number)=>{
                    annotationList.push({
                        x: item.x / this.scale,
                        y: item.y / this.scale ,
                        width: item.w / this.scale,
                        height: item.h / this.scale,
                        imageId:this.images.id,
                        labelId:item.labelId,
                        operator:this.userName
                    })
                })
                let params={
                    imageWidth:scaleImg.naturalWidth,
                    imageHeight:scaleImg.naturalHeight,
                    imageId:this.images.id,
                    annotationList:annotationList,
            
                }
             artificialMark.saveBatch(params).then((res : RequestCode)=>{
                 (this as any).$message.success('保存成功')
                 this.isSave=true
                 this.dialogVisibleSeave=false
                  this.operateArr=[]; 
            (this as any).$store.commit('operate/editOperate','qww');
             })
         },
         //撤销操作
         cancel(){
             let that: any = this
             that.operateArr?.forEach((item:any,index:number)=>{
                 if(index == that.operateArr.length - 1){
                     if(item.operate=='复制'){
                         that.copyMsrk=null
                          reDraw(that.cav,that.ctx,that.markList,that.activeMark)
                     }else  if (item.operate=='粘贴' || item.operate=='创建'){
                          deleteDraw(that.cav,that.ctx,that.markList,item.index);
                     }
                    else if(item.operate == '移动' || item.operate=='编辑'){
                         that.markList.forEach((items:any,indexs:number)=>{
                             if(item.index == indexs){
                                that.markList.splice(indexs,1,item.frame)
                             }
                         })
                       reDraw(that.cav,that.ctx,that.markList)
                     }
                    else if (item.operate =='显示' || item.operate=='隐藏'){
                         that.saveScale=false
                        that.allShowOrHiddLableId(item.operate)
                      
                     }else if(item.operate == '放大' || item.operate=='缩小'){
                         that.saveScale=false
                         that.scaleImg(item.operate)
                         that.saveScale=true      
                     }else if(item.operate == '删除'){
                         that.markList.push(item.frame)
                        draw(that.cav,that.markList); 
                        reDraw(that.cav,that.ctx,that.markList )  
                     }else if(item.operate=='清空'){
                         that.$store.commit('operate/updateMarkList',that.copyList);
                          (this as any).$store.commit('operate/updateCopyList',[]);
                         that.initCanvas()
                     }else if(item.operate=='删除标签'){
                         item.frameList?.forEach((items:any,indexs:number)=>{
                             that.markList.push(items)
                         })
                          that.initCanvas()
                     }else if(item.operate=='替换'){
                         that.markList?.forEach((items:any,indexs:number)=>{
                             if(item.index==indexs){
                            items.labelId=item.labelId
                            items.color=item.color
                            items.labelName=item.name
                               reDraw(that.cav,that.ctx,that.markList,indexs);
                               draw(that.cav,that.markList);
                             }
                         })
                     }else if(item.operate=='标签替换'){
                         item.data.forEach((i:any,ind:number)=>{
                         that.markList?.forEach((items:any,indexs:number)=>{
                             if(i.index==indexs){
                            items.labelId=i.labelId
                            items.color=i.color
                            items.labelName=i.name
                               reDraw(that.cav,that.ctx,that.markList,indexs);

                             }
                         })
                         })
                         
                               draw(that.cav,that.markList);
                     }
                      that.operateArr.splice(index,1);        
                 }
             });
              (this as any).$store.commit('operate/updateMarkList',this.markList)
                draw(this.cav,this.markList);
               (this as any).$store.commit('operate/editOperate','qww');
         },
         submitReplace(){
             let that:any=this
             console.log(that.markIndex)
                       this.markList?.forEach((item:any,index:number)=>{
                        if(this.markIndex==index){
                            console.log(item)
                            this.saveOperate(this.replaceData)
                            item.labelId=this.labelId
                            item.color=this.markColor
                            item.labelName=this.labelName
               reDraw(that.cav,that.ctx,that.markList,index);
                draw(that.cav,that.markList);
                that.dialogVisibleReplace=false;
               (this as any).$store.commit('operate/editOperate','qww');
                        }
                    })
         },
         //替换标签
         replaceLable(){
         
             let that :any=this
                if(this.markIndex!==null && this.markIndex>=0){
                    this.markList?.forEach((item:any,index:number)=>{
                        if(this.markIndex==index){
                            that.replaceData={
                                operate:'替换',
                                labelId:item.labelId,
                                name:item.labelName,
                                color:item.color,
                                index:index
                            };
                           
                            that.dialogVisibleReplace=true;
               (this as any).$store.commit('operate/editOperate','qww');
                        }
                    })
                }
         },
         //复制标注框
         copyDraw(){
             if(this.activeMark.x!==null){
                 this.copyMsrk=this.activeMark
                 let data :any |void={
                 operate:'复制',
                 frame:this.copyMsrk,
             }   
           this.saveOperate(data);
             }
          
        (this as any).$store.commit('operate/editOperate','qww')
         },
         //粘贴标注框
         paste(){
             if(this.copyMsrk!==null){
                 this.markList.push(this.copyMsrk)
                  draw(this.cav,this.markList);
                      let frame={}
            let markIndex =null
            this.markList?.forEach((item:any,index:number)=>{
                if(index==this.markList.length -1){
                    frame=item
                    markIndex=index
                }
            })
            let data={
                operate:'粘贴',
                frame:frame,
                index:markIndex
            }
            this.saveOperate(data);
             }
         
            (this as any).$store.commit('operate/editOperate','qww')
             this.copyMsrk=null
         },
         //还原图片
  
         //缩放图片
         scaleImg(val:string){
             let that :any=this
            let scaleImg :any =document.getElementById('scaleImg')
             let data={}
             if(val=='放大'){
                that.scale += 0.1
                that.scaleNumImg+=1
             scaleImg.height =scaleImg.height * 1.1
             scaleImg.width =scaleImg.width * 1.1
                data={
                    operate:'缩小'
                }
                     that.scale= that.scale.toFixed(1)
           that.scale =Number(that.scale)
            that.imgHeight= scaleImg.height
             that.imgWidth=scaleImg.width
            that.initCanvas(val)
             reDraw(that.cav,that.ctx,that.markList)
              if(this.saveScale){
                   this.saveOperate(data);
              }
             }else{
                  if(that.scale>=0.2){
                  that.scale = that.scale - 0.1
                  that.scaleNumImg=that.scaleNumImg - 1
                  scaleImg.height =scaleImg.height * 0.9
                  scaleImg.width =scaleImg.width * 0.9
                     data={
                      operate:'放大'
                     }
            that.scale= that.scale.toFixed(1)
           that.scale =Number(that.scale)
            that.imgHeight= scaleImg.height
             that.imgWidth=scaleImg.width
            that.initCanvas(val)
             reDraw(that.cav,that.ctx,that.markList)
              if(this.saveScale){
                   this.saveOperate(data);
              }
                  }
             }
      
              
            (that as any).$store.commit('operate/editOperate','qww')
         },
         //显示或隐藏所有标签ID
         allShowOrHiddLableId(val : string){
             let data={}
             if(val=='显示'){
                 this.allShowOrHiddId=true
                 data={
                     operate:'隐藏'
                 }
             }else{
                this.allShowOrHiddId=false  
                 data={
                     operate:'显示'
                 }
             }
             if(this.saveScale){
                  this.saveOperate(data);
             }
               
             (this as any).$store.commit('operate/editOperate','')
         },
         //是否保存弹框
         showSave(val:number){
             this.isAuto=val
             this.dialogVisibleSeave=true
         },
         //自动轮播
         	startInterval(){
                 if(this.timer!==null){
                     clearInterval(this.timer);
                     this.timer=null
                 }else{
                    this.timer = setInterval(()=>{
					this.currentIndex++;
					if(this.currentIndex === this.count+1){
						this.currentIndex = 1
					}
                    this.getImg()
                    //  this.getImgWidth()

                    // this.initCanvas()
				},this.percentage)
                 }
                   (this as any).$store.commit('operate/editOperate','qww')
			},
            clickicon(val:string,type:number){
                this.isAuto=type
                if(this.isSave){
                  this.clickIcon(val) 
                }else{
                    this.dialogVisibleSeave=true
                }
            },
            //左右翻动图片
            clickIcon(val:string){
                if(val==='down'){
					this.currentIndex++;
					if(this.currentIndex===this.count +1){
						this.currentIndex = 1;
					}
				}else{
				
					if(this.currentIndex === 1){
						this.currentIndex = this.count +1 ;
					}
					this.currentIndex--;
				}
                (this as any).ctx.clearRect(0,0,this.cav.width,this.cav.height);
                this.ctx.beginPath()
                    this.getImg()
                    // this.getImgWidth()

            },
         //删除选中标注框
         submitDel(){
             let that :any =this
             if(this.deleteClass==1){
             if(that.markIndex!==null && this.markIndex>=0){
              let frame={}
            let markIndex =null
            that.markList?.forEach((item:any,index:number)=>{
                if(index==that.markList.length -1){
                    frame=item
                    markIndex=index
                }
            })
            let data={
                operate:'删除',
                frame:frame,
                index:markIndex
            }
                that.saveOperate(data)
                 deleteDraw(that.cav,that.ctx,that.markList,that.markIndex);
               that.$store.commit('operate/updateMarkIndex',-1)
              
             }
             this.massageList.unshift('删除');
           
               (this as any).$store.commit('operate/editOperate','qww') 
             }else if(this.deleteClass==2){
                 that.deleteMarkLableAll()
             }else{
                 that.deleteMarkLable() 
             }
        this.dialogVisibleDel=false;
         },
         //清空标注框
         clearMark(){
                 let data={
                     operate:'清空'
                    };
                 (this as any).$store.commit('operate/updateCopyList',this.markList);
                 (this as any).$store.commit('operate/updateMarkList',[]);
                 this.saveOperate(data)
                 this.initCanvas();
                (this as any).$store.commit('operate/editOperate','qww')
         },
          initCanvas(val:string | void) {  
            let that: any = this
            this.$nextTick(() => {
            
                // 初始化canvas宽高 
                  that.cav = that.$refs.markCanvas;
                 that.cav.height = `${that.imgHeight}`;
                  that.cav.width = `${that.imgWidth}`;
                that.ctx = that.cav.getContext('2d');
                that.ctx.strokeStyle = that.markColor
                that.cav.style.cursor = 'crosshair';
                (this as any).ctx.clearRect(0,0,this.cav.width,this.cav.height);
                this.ctx.beginPath()
                 draw(that.cav,this.markList);
                // 计算使用变量
              // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
                // 若服务端保存的为百分比则此处需计算实际座标, 直接使用实际座标可省略
               that.markList.forEach(function (value :any, index :number, array :any) {
                   let newValue={}
                   if(value.height!==undefined){
                         if(val=='放大'){
                          newValue = {
                        x: value.x+(value.x * 0.1),
                        y: value.y+(value.y * 0.1),
                        w: value.width+(value.width * 0.1),
                        h: value.height+(value.height * 0.1),
                         color:value.color,
                        labelId:value.labelId,
                        labelName:value.labelName
                    }
                   }else if(val=='缩小'){
                              newValue = {
                        x: value.x+(value.x * 0.1),
                        y: value.y+(value.y * 0.1) ,
                        w: value.width-(value.width * 0.1),
                        h: value.height-(value.height * 0.1),
                         color:value.color,
                        labelId:value.labelId,
                        labelName:value.labelName
                    }
                   }else{
                           newValue = {
                        x: value.x * that.scale,
                        y: value.y * that.scale ,
                        w: value.width * that.scale,
                        h: value.height * that.scale,
                        color:value.color,
                        labelId:value.labelId,
                        labelName:value.labelName
                    }
                   }
                 
                   }else{
                                  if(val=='放大'){
                          newValue = {
                        x: value.x+(value.x * 0.1),
                        y:value.y+(value.y * 0.1)  ,
                        w:value.w+(value.w * 0.1),
                        h: value.h+(value.h * 0.1),
                         color:value.color,
                        labelId:value.labelId,
                        labelName:value.labelName
                    }
                   }else if(val=='缩小'){
                              newValue = {
                        x: value.x-(value.x * 0.1),
                        y: value.y-(value.y * 0.1),
                        w: value.w-(value.w * 0.1),
                        h: value.h-(value.h * 0.1),
                         color:value.color,
                        labelId:value.labelId,
                        labelName:value.labelName
                    }
                   }else{
                           newValue = {
                        x: value.x * that.scale ,
                        y: value.y * that.scale ,
                        w: value.w * that.scale,
                        h: value.h * that.scale ,
                        color:value.color,
                        labelId:value.labelId,
                        labelName:value.labelName
                    }
                   }
                   }
                 
                    that.markList.splice(index, 1, newValue)
                })
                // 若list长度不为0, 则显示已标记框
                if (that.markList.length !== 0) {
                    that.markList.forEach(function (value :any, index :number, array :any) {
                        // 遍历绘制所有标记框
                        that.ctx.rect(value.x, value.y, value.w, value.h);
                        that.ctx.stroke();
                    });
                }
                // 调用封装的绘制方法
                draw(that.cav,this.markList);
                reDraw(that.cav,that.ctx,that.markList);                  
                // 备注: js中对象操作指向的是对象的物理地址, 获取绘制完矩形的结果数组直接取用或处理this.markList即可
            })
        },
        canvas(){
             let that: any = this
             this.$nextTick(() => {
                // 初始化canvas宽高 
                that.cav = that.$refs.markCanvas;
                that.initCanvas()
            })
        },
        currentChange(val: number){
           
            this.pageNum=val
                 artificialMark.getLabelByPhotoList({current:this.pageNum,size:this.size,photoListId:this.images.photoListId}).then((res:RequestCode)=>{
                 this.total=res.data.total
                   this.tagList= res.data.records
             })
        },
        delClose(){
             this.dialogVisibleDel=false;
              (this as any).$store.commit('operate/editOperate','qww') 
            
        },
        seaveClose(){
            //自动浏览
            if(this.isAuto==1){
                this.startInterval()
            }else if(this.isAuto==2){
                this.clickIcon(this.upOrDown)
            }else {
                this.getImg()
            }
            this.isSave=true
             this.operateArr=[]; 
            this.dialogVisibleSeave=false;
            (this as any).$store.commit('operate/editOperate','qww') 
        },
         handleClick(tab:any){
                  this.pageNum=1
                  this.getAbbreviateImg()
      },
        sizeSimpChange(val:number){
            this.simpSize=val
            this.getAbbreviateImg()
        },
           currentSimpChange(val:number){
            this.simpNum=val
            this.getAbbreviateImg()

        },
        replaceClose() {
            this.dialogVisibleReplace=false;
              (this as any).$store.commit('operate/editOperate','qww') 
                
      },
      labelReplaceClose(){
          this.labelReplace=false;
         (this as any).$store.commit('operate/editOperate','qww') 
      }
     },
     beforeUnmount(){
         (this as any).$store.commit('operate/editOperate','qwer') 
     }
}
</script>
<style lang="scss" scoped>
.cursor{
      cursor: pointer;  
}
.artificialMark{
    width: 100%;
    display: flex;
    height: 100%;
     .thumbnail{
        height: 100%;
        background: #fff;
        margin-right: 30px;
        .contents{
            width: 100px;
            height: 100px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 20px auto 0;
            img{
            display: block;
            width: 100%;
            height: 100%; 
            }
        }
    }
 
      .icon{
        position: relative;
        top: 50%;
        transform: translate(0,-50%);
        z-index: 20;
        display: block;
        width: 40px;
        height: 40px;
        cursor: pointer;
    
    }
    .iconRight{
        left: 95%;
        transform: translateY(-150%);
    }
    .iconLeft{
        left: 0;
    }
  .img{
    position: relative;
    width: 100%;
    height: 750px;
    overflow: auto;

    img{
       margin: auto;
       position: relative;
    }
         .lableId{
        width: 10px;
        height: 10px;
        position: absolute;
        z-index:40;
        font-size: 12px;
    }
    canvas{
    
       position: absolute;
       z-index: 10;
        left: 0;
        top: 0;
 
    }
  }
  .markDrawer{
      padding: 0 10px;
      box-sizing: border-box;
      width: 300px;
     height: 750px;
    position: relative;
    right: -100px;
    top: 0;
       overflow-y: auto;
      background: #fff;
      .tagCategory{
          width: 100%;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid rgba(242, 242, 242, 1);
          text-align: center;
          span{
              font-size: 14px;
              font-weight: 600;
              font-family: 'PingFangSC-Semibold;';
              margin-left: 10px;
          }
      }
      .tag{
          margin-top: 10px;
          width: 100%;
          display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
           .search{
               display: flex;
               align-items: center;
           }
           .tags{
                width: 100%;
                height: 200px;
                overflow: auto;
                 display: flex;
           flex-wrap: wrap;
           justify-content: space-between; 
           }
          .tagContent{
              width: 50%;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              font-size: 14px;
              margin-top: 20px;
              .tagText{
                  line-height: 20px;
                  text-align: center;
                    font-size: 14px;
                    opacity:0.8
              }
          }
      }
      .pagination{
        margin-top: 10px;
        display: flex;
      
        justify-content: center;
      }
      .markList{
          .header{
              margin-top: 20px;
              padding-bottom: 10px;
            .title{
                  font-size: 14px;
              font-weight: 600;
              font-family: 'PingFangSC-Semibold;';
              margin-left: 10px;
            }
          }
          .mark{

             height: 200px;

              overflow-y: auto;
              margin-left: 10px;
              margin-top: 20px;
              border: 1px solid rgba(227, 227, 227, 1);
             .mark-item-content, .mark-content{
                  height: 30px;
             border-bottom: 1px solid rgba(227, 227, 227, 1);
             display: flex;
             align-items: center;
           
                  .mark-icon{
                       width: 30px;
                       height: 30px;
                       border-right: 1px solid rgba(227, 227, 227, 1);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                 
                  }
                  .mark-item-message{
                         font-size: 12px;
                      color: rgba(102, 102, 102, 1);
                      width: 100%;
                      display: flex;
                    justify-content: space-between;
                      align-items: center;
                      box-sizing: border-box;
                      padding: 0 10px;
                           .icon{
                          display: flex;
                          align-items: center;
                          width: 60px;
                          justify-content: space-around;
                          transform: translateY(10%);
                        
                      }
                  }
                  .mark-message{
                      font-size: 12px;
                      color: rgba(102, 102, 102, 1);
                      width: 100%;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      box-sizing: border-box;
                      padding: 0 10px;
                  }
              }
          }
      }
      .message{
          .header{
              margin-top: 30px;
              font-size: 14px;
              font-weight: 600;
              font-family: 'PingFangSC-Semibold;';
              margin-left: 10px;
          }
          .allMessage{
              .text{
                  margin-left: 30px;
                  margin-top: 20px;
                  display: flex;
                  align-items: center;
                  span{
                      margin-left: 15px;
                  }
              }
           .editMessage{
               display: flex;
               margin-left: 45px;
               margin-top: 10px;
               span{
                   margin-left: 20px;
               }
                  .box_12{
                    background-color: rgba(0, 161, 255, 0.5);
                    border-radius: 50%;
                    width: 8px;
                    height: 8px;
                    margin-top: 6px;
              }
           }
          }
      }
  }
}
</style>
